<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1 :data-message="message">hello {{ message }}</h1>
		<button v-on:click="reverseMessage">逆转消息</button>
		<span v-if="seen">条件与循环,现在你看到我了</span>
		<ul>
			<li v-for="item of todos">{{ item.text }}</li>
		</ul>
		<input type="text" v-model="message">
	</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
	el:'#app',
	data:{
		message:'vue12',
		seen:false,
		todos: [
      		{ text: '学习 JavaScript' },
      		{ text: '学习 Vue' },
      		{ text: '整个牛项目' }
    	]
	},
	beforeCreate:function(){
		console.log('beforeCreate')
	},
	// 比如 created 钩子可以用来在一个实例被创建之后执行代码
	created:function(){
		console.log('message is ' + this.message)
	},
	beforeMount:function(){
		console.log('beforeMount')
	},
	mounted:function(){
		console.log('mounted')
	},
	beforeUpdate:function(){
		console.log('beforeUpdate')
	},
	updated:function(){
		console.log('updated')
	},
	beforeDestroy:function(){
		console.log('beforeDestroy')
	},
	destroyed:function(){
		console.log('destroyed')
	},
	methods:{
		reverseMessage(){
			this.message = this.message.split('').reverse().join('')
		}
	}
})
</script>
</body>
</html>